import React from 'react';
import { Link } from 'react-router-dom';
import { Carousel, Tabs, Input } from 'antd';
import { FetchAPI } from '../../utils/fetch-middleware'

import './style.less';
import bg1 from '../../img/2.png'
import bg2 from '../../img/4.png'
import bg3 from '../../img/5.png'
import TableDetail from './NewsDetail';
import OverView from '../overview/OverView';

const TabPane = Tabs.TabPane;
const Search = Input.Search;
const newsTab = ['电计新闻', '电计公告', '党建活动'];

export default class Home extends React.Component{
    state={
        screenHeight: 0,
        newsData: [[], [], []],
        pageNum: 1,
        pageSize: 10,
        total: 10,
    }


    onDetailCancel = () => {
        this.setState({
            detail: false,
        });
    }

    handleDetail = (record) => {
        this.setState({
            detail: true,
            currentData: record || {},
        });
    }

    componentWillMount() {
        this.setState({
            screenHeight: document.documentElement.clientHeight - 60,
        }, () => {
            window.onresize = () => {
                this.setState({
                    screenHeight: document.documentElement.clientHeight - 60,
                });
            };
        });

        FetchAPI(`/api/notice/findAll`, 'POST', null).then((result) => {
            if (result.code === 'ACM0010') {
                this.setState({
                    newsData: [this.resetArr(result.data, '0'), this.resetArr(result.data, '1'), this.resetArr(result.data, '2')],
                });
                // const {total, current, size} = result;
                let total = result.data.total;
                let current = result.data.number;
                let size = result.data.size;
                this.setState({total: total, pageNum: current, pageSize: size})
            } else {
                this.warning(result.message)
            }
        }, (err) => {
            console.log(err);
        });
    }

    // 整理数组，区分新闻类型
    resetArr = (data, type) => {
        return data.filter(item => item.type === type).map(item => {
            item.key = item.uuid;
            item.title = item.title;
            item.status = item.status === '1' ? '可用' : '不可用';
            return item;
        });
    }

    onTabsChange = (key) => {
        console.log(key, 'tabsKey');
    }

    render() {
        const { screenHeight, newsData, detail, currentData } = this.state;
        const minHeight = screenHeight < 600 ? 600 : screenHeight;
        return (
            <div className="home">
                <div style={{minHeight: `${minHeight}px`, minWidth: '1230px'}}>
                    <Carousel autoplay effect="fade">
                        <div style={{backgroundColor: '#a5c6c7', minHeight: `${minHeight}px`, background: `url(${bg1}) no-repeat 0 0`, backgroundSize: '100% auto'}} />
                        <div style={{backgroundColor: '#c7a8a2', minHeight: `${minHeight}px`, background: `url(${bg2}) no-repeat 0 0`, backgroundSize: '100% auto'}} />
                        <div style={{backgroundColor: '#6a6b65', minHeight: `${minHeight}px`, background: `url(${bg3}) no-repeat 0 0`, backgroundSize: '100% auto'}} />
                    </Carousel>
                </div>
                <div className="home-content">
                    <div className="content-more">
                        <p><span><Link to={{
                            pathname: '/view+overview0',
                            state: {
                                index: '0',
                                subIndex: '0',
                            },
                        }}>电计学院简介</Link></span>|<span><a href={"http://www.jliae.edu.cn/"}>吉林建筑大学</a></span></p>
                        <div>
                            <a href="/login">管理员</a>|<a href="/login">教职工</a>|<a href="/addMsg">校友</a>
                            <Search
                                placeholder="input search text"
                                onSearch={value => console.log(value)}
                                style={{ width: 200 }}
                            />
                        </div>
                    </div>
                    <div className="content-news">
                        <div className="news-left">
                            <Tabs onChange={this.onTabsChange} type="card">
                                {newsTab.map((title, key) => {
                                    return <TabPane tab={title} key={key}>
                                        {newsData[key].map((item, index) => {
                                            if (index >= 8) {
                                                return false;
                                            }
                                            return <div><a key={item.uuid} href="#" onClick={() => this.handleDetail(item)}>《{item.title}》</a><br /></div>
                                            }
                                        )}
                                    </TabPane>;
                                })}
                            </Tabs>
                        </div>
                        <TableDetail visible={detail} currentData={currentData} handleCancel={this.onDetailCancel} />
                        <div className="news-right">
                            <p><a href={"http://jwc.jlju.edu.cn/"}>教务处</a><a href={"http://www.jliae.edu.cn/"}>建大官网</a></p>
                            <p><a href={"http://tsg.jlju.edu.cn/"}>图书馆</a><a href={"http://www.jliae.edu.cn/"}>学术协会</a></p>
                            <p><a href={"http://jdjyw.jlu.edu.cn/"}>吉大就业</a><a href={"http://job.cust.edu.cn//"}>理工就业</a></p>
                            <p><a href={"http://www.jledu.gov.cn/jyt/"}>省教育厅</a><a href={"http://kjt.jl.gov.cn/"}>省科技厅</a></p>
                            <p><a href={"http://www.chsi.com.cn/"}>学信网</a><Link to={{
                                pathname: '/view+employment8',
                                state: {
                                    index: '4',
                                    subIndex: '8',
                                },
                            }}>下载中心</Link></p>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}